<template>
  <div
    class="move-rect"
    draggable="true"
    @dblclick="rowView(item)"
    @drag="drag"
    @dragend="dragend"
    @dragstart="dragstart"
  >
    <div class="wrap">
      <div class="label">
        <img src="@/assets/icons/type.png" />
        <span>{{ $store.getters['dict/dictValueByParent']('IssueType', item.issueType) }}</span>
      </div>
      <div class="title">{{ item.issueId }}. {{ item.issueName }}</div>
      <div class="row">
        <!-- 创建人 -->
        <div>
          <img src="@/assets/icons/user.png" />
          <span>{{ $store.getters['user/getUserNameById'](item.issueCreateUser) }}</span>
        </div>
        <!-- 负责人 -->
        <div>
          <img src="@/assets/icons/repair.png" />
          <span>{{ $store.getters['user/getUserNameById'](item.issueAppointUser) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MoveRect',
  props: {
    item: {
      default: () => null,
      type: Object
    },
    index: {
      default: 0,
      type: Number
    },
    colorList: {
      default: () => [],
      type: Array
    }
  },
  data() {
    return {
      richTextData: '',
      viewDialogVisible: false
    }
  },
  methods: {
    dragstart(e) {
      e.target.style.opacity = '0.5'
      this.$emit('dragstartEvent', { ...this.item, index: this.index })
    },

    drag(e) {
      return ''
    },

    dragend(e) {
      e.target.style.opacity = '1'
      this.$emit('dragendEvent', { ...this.item, index: this.index })
    },

    rowView() {
      this.$bus.$emit('issue-view', this.item)
    }
  }
}
</script>
<style lang="scss" scoped>
.move-rect {
  width: 100%;
  padding: 5px 10px;
  user-select: none;
}

.wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  text-align: left;
  padding: 10px 6px;
  border-radius: 2px;
  min-height: 80px;
  position: relative;

  .label {
    position: absolute;
    top: 3px;
    right: 3px;
    display: flex;
    align-items: center;
    img {
      width: 12px;
      height: 12px;
      background-size: 100% 100%;
    }
    span {
      margin-left: 5px;
      font-size: 12px;
      color: #333;
    }
  }

  .title {
    margin-top: 5px;
    padding: 5px 0px;
    font-size: 15px;
    line-height: 17px;
    color: #333;
    word-break: break-all;
  }

  .row {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    div {
      display: flex;
      align-items: center;
    }
    img {
      width: 12px;
      height: 12px;
      background-size: 100% 100%;
    }
    span {
      margin-left: 5px;
      font-size: 12px;
      color: #a2a2a2;
    }
    .time {
      color: #908a8a;
    }
  }
}
</style>
